<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点推荐</title>
    <#include "/header.html">
    <script src="${request.contextPath}/statics/libs/bootstrapValidator.js"></script>
</head>
<body>
    <div class="outer" id="app">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/modules/senic/senicuserview.html" style="display: flex; align-items: center;">
                <img alt="Brand" src="/statics/img/icon.png" height="30px">
                <div id="siteTitle">&nbsp;协游网</div>
            </a>
        </div>
        <div style="float: right;">
            <a v-if="authStatus" class="navbar-brand" href="../../login.html">
                登录
            </a>
            <a v-else class="navbar-brand" href="../../logout">
                退出登录
            </a>
        </div>
        <div style="float: right;">
            <a class="navbar-brand" href="./senicuserhome.html">
                个人中心
            </a>
        </div>
        <div style="float: right;">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control"  v-model="searchParams.senicName" placeholder="景点搜索">
                </div>
                <a class="btn btn-default" href="#allPlace" @click="searchSenic">搜索</a>
            </form>
        </div>

        </div>
    </nav>
    <div class="container-fluid mainter">
        <div id="imgMap" class="row"> 
            <img src="/statics/img/litaowan.jpg" alt="" height="100%" width="100%">
        </div>
        <div id="hottitle" class="row">
            <h3>景点推荐</h3>
        </div>
        <div id="hotView" class="row">
            <div class="col-md-10" style="padding: 0px;">
                <div class="row">
                    <div v-for="(item,index) in senicRecomList">
                        <div class="col-md-2" style="padding: 5px;" @click="viewDetail(item.id)">
                            <div class="senicCardOne">
                                <div style="width: 100%;height: 240x;overflow: hidden;"><img :src="item.senicImg" alt="" height="240px" width="100%" class="senic_img"></div>
                                <div style="display: flex;justify-content: space-between;"><h5>{{ item.senicName }}</h5><h5 style="color: gold;">{{ item.senicScore }}</h5></div>
                                <h4>{{ item.senicIntro }}...</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2" style="margin-top: -75px;">
                <div class="row"><h3>热门景点</h3></div>
                <div class="row">
                    <div class="col-md-12 senicRank">
                        <div id="rank_items">
                            <ul class="list-group">
                                <li class="list-group-item" v-for="(item,index) in rankList" style="display: flex;align-items: center;justify-content: space-between;" @click="viewDetail(item.id)">
                                    <b style="font-size: 36px;"><span><i>{{ index + 1}}</i></span></b>
                                    <div style="margin-left: 20px;font-size: 15px;color: aliceblue;">{{ item.senicName }}</div>
                                    <!-- <div style="margin-left: 20px;font-size: 15px;color: aliceblue;"> 评分5.0</div>    -->
                                </li>
                              </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="allPlace" class="row">
            <div class="col-md-2">
                <h3><a href="javascript:location.reload();" style="color: aliceblue;">全部景点</a></h3>
            </div>
            <div class="col-md-10" style="margin-top: 25px;padding: 0px;">
                <ul class="place_list">
                    <place-item v-for="(item,index) in senicPlaceList" :place="item"></place-item>
                </ul>
            </div>
        </div>
        <div id="allView" class="row">
            <div v-for="(item,index) in senicinfoList">
                <div class="col-md-2" style="padding: 5px;">
                    <div class="senicCardTwo" @click="viewDetail(item.id)">
                        <div style="width: 100%;height: 120px;overflow: hidden;"><img :src="item.senicImg" alt="" height="120px" width="100%" class="senic_img"></div>
                        <h5>{{ item.senicName }}</h5>
                        <h4>{{ item.senicIntro }}...</h4>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer" class="row">
            <span>已经没有了</span>
        </div>
    </div>
    </div>
</body>
<script>
    var placeItem = Vue.extend({
        name: 'place-item',
        props:['place'],
        template:'<li><a href="#allPlace" @click="vm.searchSenic(place)"><span>&nbsp;{{ place }}&nbsp;</span></a></li>'
    })
    Vue.component('place-item',placeItem)
    var vm = new Vue({
        el: '#app',
        data: {
            senicinfo: {},
            senicinfoList: [],
            authStatus:true,
            senicRecomList: [],
            searchParams: {
                senicPlace: '',
                senicName: ''
            },
            senicPlaceList:[],
            rankList:[],
        },
        computed: {
            // rankList: function(){
            //     rankdata = this.senicinfoList.slice(0,5)
            //     return rankdata;
            // },
            placeList: function(){
                let datalist = []
                for(let i in this.senicinfoList){
                    datalist.push(this.senicinfoList[i].senicPlace)
                }
                return Array.from(new Set(datalist))
            }
        },
        mounted: function() {
            // this.getSenicinfo();
            // // this.getSenicRecominfo();
            // this.getSenicPlaceinfo();
            this.getLoginStatus();
            this.getAllView()
        },
        methods: {
            getSenicRecominfo:function(){
                $.get(baseURL + "senic/senicinfo/recommendlist/" , function(r){
                    console.log(r)
                    vm.senicRecomList = r.data;
                    for(let i in vm.senicinfoList){
                        introMessage = vm.senicinfoList[i].senicIntro;
                        introMessage = introMessage.substring(0,20);
                        vm.senicinfoList[i].senicIntro = introMessage
                    }
                });

            },
            getSenicinfo:function(){
                $.get(baseURL + "senic/senicinfo/allInfolist/" , function(r){
                    console.log(r)
                    vm.senicinfoList = r.data;
                    for(let i in vm.senicinfoList){
                        introMessage = vm.senicinfoList[i].senicIntro;
                        introMessage = introMessage.substring(0,20);
                        vm.senicinfoList[i].senicIntro = introMessage
                    }
                });

            },
            getSenicPlaceinfo:function(){
                $.get(baseURL + "senic/senicinfo/senicPlaceList/" , function(r){

                    vm.senicPlaceList = r.senicPlaceList
                    
                });

            },
            getAllView:function(){
                $.get(baseURL + "senic/senicinfo/allView" , function(r){
                    vm.rankList = r.rankList
                    vm.senicinfoList = r.allInfoList;
                    vm.senicPlaceList = r.allPlaceInfoList;
                    vm.senicRecomList = r.recomList;
                    for(let i in vm.senicinfoList){
                        introMessage = vm.senicinfoList[i].senicIntro;
                        introMessage = introMessage.substring(0,20);
                        vm.senicinfoList[i].senicIntro = introMessage
                    }

                    for(let i in vm.senicinfoList){
                        introMessage = vm.senicinfoList[i].senicIntro;
                        introMessage = introMessage.substring(0,20);
                        vm.senicinfoList[i].senicIntro = introMessage
                    }
                });

            },
            getLoginStatus:function(){
                $.get(baseURL + "/sys/user/info/" , function(r){
                    if(r.code == 0){
                        vm.authStatus = false
                    }
                });
            },
            viewDetail:function(index){
                location.href = "senicDetailView.html?index=" + index;
            },
            searchSenic:function(place){
            if(place.isTrusted){
                vm.searchParams.senicPlace = ''
            }else{
                vm.searchParams.senicPlace = place
            }
            var url = baseURL + "senic/senicinfo/searchList/";
            $.ajax({
                type: "POST",
                url: url,
                contentType: "application/json",
                data: JSON.stringify(vm.searchParams),
                success: function(r){
                    if(r.code === 0){
                        vm.senicinfoList = r.searchList
                    }else{
                        alert(r.msg);
                    }
                }
            });
            }
        },
    })
</script>
<style>
    html,body,.outer {
        margin: 0px;
        height: 100%;
        background-color: #121212;
    }
    .container-fluid.mainter{
        height: 100%;
        padding-left: 80px;
        padding-right: 80px;
        padding-top: 0px;
    }
    .senic_img:hover {
        animation: bigger 1s;
        animation-fill-mode:forwards;
    }
    .list-group-item {
        padding: 5px;
        background-color: #121212;
    }
    #nav {
        display: flex;
        align-items: center;
        margin-top: -20px;
    }
    #imgMap{
        height: 60%;
        margin-left: -80px;
        margin-right: -80px;
        margin-top: -20px;
        background-color: antiquewhite;
        padding: 0px;
    }
    .row {
        padding-top: 10px;
        border: none;
    }
    #hotOne {
        padding-left: 1px;
        padding-right: 1px;
    }
    span,h3,h5 {
        color: white;
    }
    h4 {
        color: #6b6a6a;
        font-size: 8px;
    }
    .senicCardTwo {
        height: 180px;
        width: 100%;
        padding: 0px;
        border-radius: 10px;
        overflow: hidden;
    }
    .senicCardOne {
        height: 300px;
        width: 100%;
        padding: 0px;
        border-radius: 10px;
        overflow: hidden;
    }
    ul {
        padding-inline-start: 0px;
    }
    .place_list li{
        display: inline;
        font-size: 15px;
    }
    .senicRank {
        margin-top: 10px;
    }
    @keyframes bigger{
        0% {
            transform: scale(1.0);
        }
        100% {
            transform: scale(1.2);
        }
    }
</style>
</html>